<template>
    <el-container>
      <el-header>
        <h1>后台管理</h1>
        <el-button type="success" @click="tui">退出</el-button>
      </el-header>
      <el-container>
        <el-aside :width="iscol ? '60px' : '200px'">
          <div class="iscol" @click="iscol = !iscol" ><van-icon name="flower-o" /></div>
          <el-menu
            unique-opened
            :collapse-transition="false"
            :collapse="iscol"
            router
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
          >
            <el-submenu :index="item.id+''" v-for="item in menus" :key="item.id">
              <template slot="title">
                <i class="el-icon-location"></i>
                <span>{{item.authName}}</span>
              </template>
              <el-menu-item :index="'/'+item2.path" v-for="item2 in item.children" :key="item2.id">
          <i class="el-icon-setting"></i>
          <span slot="title">{{item2.authName}}</span>
        </el-menu-item>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-main><router-view></router-view></el-main>
      </el-container>
    </el-container>
  </template>
  
  <script>
  export default {
    data() {
      return {
        iscol: false,
        menus:[]
      };
    },
    methods: {
      tui() {
        sessionStorage.removeItem("token");
        this.$router.push("/login");
      },
        async getmenus(){
           const {data}=await this.axios.get('/menus')
           this.menus=data.data
        }
    },
    created(){
      this.getmenus()
    }
  };
  </script>
  
  <style scoped>
  .el-header {
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: gray;
  }
  .iscol{
     width: 200px;
     height: 30px;
     background: #545c64;
  }
  </style>